<template>
	<div class="Myheader">
		<!-- 快速导航 start-->
		<section class="shortcut">
		    <div class="w">
		        <div class="fl">
		            <ul>
		                <li>
		                    品优购欢迎您！&nbsp;
		                </li>
		                <li>
		                    <router-link to="/login">请登录 &nbsp</router-link>
							<router-link to="/register" class="style_red">免费注册 </router-link>
		                </li>
		            </ul>
		        </div>
		        <div class="fr">
		            <ul>
		                <li>我的订单</li>
		                <li></li>
		                <li>我的品优购</li>
		                <li></li>
		                <li>品优购会员</li>
		                <li></li>
		                <li>企业采购</li>
		                <li></li>
		                <li>关注品优购</li>
		                <li></li>
		                <li>客户服务</li>
		                <li></li>
		                <li>网站导航</li>
		            </ul>
		        </div>
		    </div>
		</section>
		<!-- 快速导航 stop-->
		
		<!-- header部分 start-->
		<header class="header w">
		    <!-- logo部分 -->
		    <div class="logo">
		        <h1>
		            <router-link to="/home" class="home">
						品优购首页
					</router-link>
		        </h1>
		    </div>
		    <!-- search部分 -->
		    <div class="search">
		        <input type="search" placeholder="学习开发">
		        <button>搜索</button>
		    </div>
		    <!-- hotwords部分 -->
		    <div class="hotwords">
		        <a href="#" class="style_red">优惠购首发</a>
		        <a href="#">亿元优惠</a>
		        <a href="#">9.9团购</a>
		        <a href="#">满99减30</a>
		        <a href="#">办公用品</a>
		        <a href="#">电脑</a>
		        <a href="#">通信</a>
		    </div>
		    <!-- shopcar部分 -->
		    <div class="shopcar">
		        我的购物车
		        <i class="count">8</i>
		    </div>
		</header>
		<!-- header部分 stop-->
		
		<!-- nav部分 start-->
		<nav class="nav">
		    <div class="w">
		        <!-- dropdown部分 -->
		        <div class="dropdown">
		            <div class="dt">
		                全部商品分类
		            </div>
		            <div class="dd" v-show="$route.meta.istrue">
		                <ul>
		                    <li><a href="#">家用电器</a></li>
		                    <li><a href="list.html">手机、数码、通信</a></li>
		                    <li><a href="#">电脑办公</a></li>
		                    <li><a href="#">家具、家具、家装、厨具</a></li>
		                    <li><a href="#">男装、女装、童装、内衣</a></li>
		                    <li><a href="#">个户化妆、清洁用品、宠物</a></li>
		                    <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
		                    <li><a href="#">运动户外、钟表</a></li>
		                    <li><a href="#">汽车、汽车用品</a></li>
		                    <li><a href="#">母婴、玩具乐器</a></li>
		                    <li><a href="#">食品、酒类、生鲜、特产</a></li>
		                    <li><a href="#">医疗保健</a></li>
		                    <li><a href="#">图书、音像、电子书</a></li>
		                    <li><a href="#">彩票、旅行、充值、票务</a></li>
		                    <li><a href="#">理财、众筹、白条、保险</a></li>
		                </ul>
		            </div>
		        </div>
		        <div class="navitems">
		            <ul>
		                <li>
		                    <a href="#">服装城</a>
		                </li>
		                <li>
		                    <a href="#">美妆馆</a>
		                </li>
		                <li>
		                    <a href="#">传智超市</a>
		                </li>
		                <li>
		                    <a href="#">全球购</a>
		                </li>
		                <li>
		                    <a href="#">闪购</a>
		                </li>
		                <li>
		                    <a href="#">团购</a>
		                </li>
		                <li>
		                    <a href="#">拍卖</a>
		                </li>
		                <li>
		                    <a href="#">有趣</a>
		                </li>
		            </ul>
		        </div>
		    </div>
		</nav>
		<!-- nav部分 stop-->
	</div>
</template>

<script>
	export default {
		name: 'Myheader'
	}
</script>

<style scoped>
	@font-face {
	    font-family: 'icomoon';
	    src:  url('../fonts/icomoon.eot?m4fjyf');
	    src:  url('../fonts/icomoon.eot?m4fjyf#iefix') format('embedded-opentype'),
	      url('../fonts/icomoon.ttf?m4fjyf') format('truetype'),
	      url('../fonts/icomoon.woff?m4fjyf') format('woff'),
	      url('../fonts/icomoon.svg?m4fjyf#icomoon') format('svg');
	    font-weight: normal;
	    font-style: normal;
	    font-display: block;
	  }
	 
	
	.w {
	    width: 1200px;
	    margin: 0 auto;
	}
	
	.shortcut {
	    height: 30px;
	    line-height: 30px;
	    background-color: #f1f1f1;
	}
	
	.shortcut .fl {
	    float: left;
	}
	.shortcut .fr {
	    float: right;
	}
	
	.shortcut li {
	    float: left;
	}
	
	.style_red {
	    color: red;
	}
	
	.shortcut .fr li:nth-child(even) {
	    width: 1px;
	    height: 12px;
	    margin: 9px 14px;
	    background-color: #666666;
	}
	.arrow-icon::after {
	    font-family: 'icomoon';
	    content: '';
	    margin-left: 6px;
	}
	
	/* header部分 */
	.header {
	    position: relative;
	    height: 105px;
	    /* background-color: pink; */
	}
	
	.header .logo {
	    position: absolute;
	    top: 25px;
	    width: 175px;
	    height: 59px;
	}
	
	.logo a {
	    display: block;
	    width: 175px;
	    height: 59px;
	    background: url(../assets/logo.jpg);
	    font-size: 0px;
	}
	
	/* search部分 */
	.search {
	    position: absolute;
	    top: 25px;
	    left: 348px;
	    width: 538px;
	    height: 36px;
	    border: 2px solid #ab1713;
	}
	.search input {
	    float: left;
	    width: 454px;
	    height: 32px;
	    padding-left: 10px;
	}
	
	.search button {
	    float: left;
	    width: 80px;
	    height: 32px;
	    background-color: #b2191b;
	    color: #fff;
	}
	
	/* hotwords部分 */
	.hotwords {
	    position: absolute;
	    left: 350px;
	    top: 69px;
	}
	
	.hotwords a {
	    padding: 0 12px;
	}
	
	.header .shopcar {
	    position: absolute;
	    top: 25px;
	    right: 63px;
	    height: 36px;
	    line-height: 36px;
	    text-align: center;
	    width: 140px;
	    border: 1px solid #dfdfdf;
	    background-color: #f7f7f7;
	}
	.header .shopcar::after {
	    font-family: 'icomoon';
	    content: '';
	    margin-left: 10px;
	}
	.header .shopcar::before {
	    font-family: 'icomoon';
	    content: '';
	    color: #d04b3c;
	    margin: 10px;
	}
	
	.header .shopcar .count {
	    position: absolute;
	    top: -5px;
	    left: 105px;
	    height: 14px;
	    line-height: 14px;
	    text-align: center;
	    background-color: #e40014;
	    padding: 0 5px;
	    border-radius: 7px 7px 7px 0;
	    color: #fff;
	}
	
	/* nav部分 */
	.nav {
	    height: 47px;
	    line-height: 47px;
	    /* background-color: pink; */
	    border-bottom: 2px solid #b1181a;
	}
	.dropdown {
	    float: left;
	    width: 209px;
	    height: 45px;
	    position: relative;
	}
	.dropdown .dt{
	    width: 100%;
	    height: 100%;
	    background-color: #b2191b;
	    text-align: center;
	    color: #fff;
	}
	.dropdown .dd {
	    position: absolute;
	    width: 209px;
	    height: 465px;
	    background-color: #c81622;
	    margin-top: 2px;
	}
	.dropdown .dd li {
	    height: 31px;
	    line-height: 31px;
	    margin-left: 2px;
	    padding-left: 10px;
	}
	.dropdown .dd li:hover {
	    background-color: #fff;
	}
	.dropdown .dd li a {
	    font-size: 14px;
	    color: #fff;
	}
	.dropdown .dd li:hover a {
	    color: #cb1e32;
	}
	.dropdown .dd li::after {
	    position: absolute;
	    right: 10px;
	    font-family: 'icomoon';
	    content: '';
	    color: #fff;
	}
	.navitems,
	.navitems li {
	    float: left;
	    padding: 0 26px;
	}
	.navitems {
	    float: left;
	    margin-left: 14px;
	}
	.navitems li  a {
	    display: block;
	    font-size: 16px;
	    height: 45px;
	}
	
	.navitems li:nth-child(8) {
	 margin-left: 14px;  
	 padding: 0;
	}
	

</style>